<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网易云轮播图banner</title>
    <link
      rel="shortcut icon"
      href="//s1.music.126.net/style/favicon.ico?v20180823"
    />
    <link rel="stylesheet" href="./css/index.css" />
    <style>
      .banner {
        background: url(./img/banner_bg_02.jpeg) center center / 6000px;
      }

      .banner .area {
        position: relative;
        height: 285px;
        background-color: orange;
      }

      .banner .area .area-left {
        position: relative;
        width: 730px;
      }

      /* 图片列表 */
      .banner .area-left .img-list {
        display: flex;
        overflow: hidden;
      }

      .banner .area-left .img-list li {
        flex-shrink: 0;
        width: 100%;
      }

      .banner .area-left .img-list .item {
        display: block;
      }

      .banner .area-left .img-list .item img {
        width: 100%;
        height: 285px;
      }

      /* 点的列表 */
      .banner .area-left .dots-list {
        position: absolute;
        bottom: 5px;
        left: 0;
        right: 0;
        margin: 0 auto;
        display: flex;
        justify-content: center;
      }

      .banner .area-left .dots-list li {
        margin: 0 2px;
      }

      .banner .area-left .dots-list .item {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(./img/banner_sprite.png) 3px -343px;
      }

      .banner .area-left .dots-list .item.active,
      .banner .area-left .dots-list .item:hover {
        background-position: -16px -343px;
      }

      /* right side content */
      .banner .area-right {
        position: absolute;
        right: -1px;
        top: 0;
        bottom: 0;
        width: 254px;
        background: url(./img/download_sprite.png);
      }

      .banner .area-right .download {
        display: block;
        width: 215px;
        height: 56px;
        margin: 186px 0 0 19px;
        text-indent: -9999px;
      }

      .banner .area-right .download:hover {
        background: url(./img/download_sprite.png) 0 -290px;
      }

      .banner .area-right .desc {
        margin-top: 10px;
        text-align: center;
        font-size: 12px;
        color: #8d8d8d;
      }

      /* 两个控制按钮 */
      .banner .area .control {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 37px;
        height: 63px;
        margin: auto 0;
        background-image: url(./img/banner_sprite.png);
      }

      .banner .area .control.left {
        left: -70px;
        background-position: 0 -360px;
      }

      .banner .area .control.left:hover {
        background-position: 0 -430px;
      }

      .banner .area .control.right {
        right: -70px;
        background-position: 0 -508px;
      }

      .banner .area .control.right:hover {
        background-position: 0 -578px;
      }
    </style>
  </head>
  <body>
    
    <div class="banner">
      <div class="area wrapper_03">
        <div class="area-left">
          <ul class="img-list">
            <li>
              <a href="#" class="item"
                ><img src="./img/banner_02.jpeg" alt=""
              /></a>
            </li>
            <li>
              <a href="#" class="item"
                ><img src="./img/banner_02.jpeg" alt=""
              /></a>
            </li>
            <li>
              <a href="#" class="item"
                ><img src="./img/banner_02.jpeg" alt=""
              /></a>
            </li>
            <li>
              <a href="#" class="item"
                ><img src="./img/banner_02.jpeg" alt=""
              /></a>
            </li>
          </ul>

          <ul class="dots-list">
            <li><a href="#" class="item active"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
          </ul>
        </div>

        <div class="area-right">
          <a href="#" class="download">下载客户端</a>
          <p class="desc">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
        </div>
        <a href="#" class="control left"></a>
        <a href="#" class="control right"></a>
      </div>
    </div>

  </body>
</html>
